<template>
  <div class="statistics">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card title="抢票成功率统计" :bordered="false">
          <div ref="successRateChart" style="height: 400px"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="12">
        <a-card title="时段分布" :bordered="false">
          <div ref="timeDistributionChart" style="height: 300px"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="响应时间分布" :bordered="false">
          <div ref="responseTimeChart" style="height: 300px"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="24">
        <a-card title="详细数据" :bordered="false">
          <a-table :columns="columns" :data-source="data" :loading="loading">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="record.status === '成功' ? 'success' : 'error'">
                  {{ record.status }}
                </a-tag>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 图表引用
const successRateChart = ref(null)
const timeDistributionChart = ref(null)
const responseTimeChart = ref(null)

// 表格列定义
const columns = [
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '博物馆',
    dataIndex: 'museum',
    key: 'museum',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '响应时间',
    dataIndex: 'responseTime',
    key: 'responseTime',
  },
]

// 表格数据
const data = ref([
  {
    key: '1',
    time: '2024-05-07 10:00:00',
    museum: '故宫博物院',
    status: '成功',
    responseTime: '0.8s',
  },
  {
    key: '2',
    time: '2024-05-07 10:01:00',
    museum: '国家博物馆',
    status: '失败',
    responseTime: '1.2s',
  },
])

const loading = ref(false)

// 初始化成功率图表
const initSuccessRateChart = () => {
  const chart = echarts.init(successRateChart.value)
  const option = {
    title: {
      text: '抢票成功率趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '成功率',
        type: 'line',
        data: [8.2, 7.5, 9.1, 8.8, 7.9, 10.2, 9.5],
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化时段分布图表
const initTimeDistributionChart = () => {
  const chart = echarts.init(timeDistributionChart.value)
  const option = {
    title: {
      text: '抢票时段分布'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '时段分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 35, name: '上午(9-12点)' },
          { value: 25, name: '下午(13-17点)' },
          { value: 20, name: '晚上(18-21点)' },
          { value: 20, name: '其他时段' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化响应时间分布图表
const initResponseTimeChart = () => {
  const chart = echarts.init(responseTimeChart.value)
  const option = {
    title: {
      text: '响应时间分布'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['0-0.5s', '0.5-1s', '1-1.5s', '1.5-2s', '>2s']
    },
    yAxis: {
      type: 'value',
      name: '次数'
    },
    series: [
      {
        name: '响应时间',
        type: 'bar',
        data: [120, 200, 150, 80, 70],
        itemStyle: {
          color: '#91cc75'
        }
      }
    ]
  }
  chart.setOption(option)
}

onMounted(() => {
  initSuccessRateChart()
  initTimeDistributionChart()
  initResponseTimeChart()

  // 监听窗口大小变化，重绘图表
  window.addEventListener('resize', () => {
    const charts = [
      echarts.getInstanceByDom(successRateChart.value),
      echarts.getInstanceByDom(timeDistributionChart.value),
      echarts.getInstanceByDom(responseTimeChart.value)
    ]
    charts.forEach(chart => chart && chart.resize())
  })
})
</script>

<style scoped>
.statistics {
  padding: 24px;
}
</style> 